<template>
	<view class="account_record_content">
		<tn-nav-bar fixed :bottomShadow="false" customBack backTitle="" backgroundColor="#ffd946">
			<view class="top-tab">
				<tn-tabs :list="accountRecordTypes" :itemWidth="120" :height="tabsHeight" :showBar="false" activeColor="#000" :bold="true" :fontSize="30" :current="topTabsIndex" @change="topTabsChange"></tn-tabs>
			</view>
			<view class="top-right" slot="right">
				<text class="tn-icon-close" @click="close"></text>
			</view>
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="item_content">
				<tn-grid :col="4" v-if="topTabsIndex == 0">
					<block v-for="(item, index) in categoryOutList" :key="index">
						<tn-grid-item style="margin-bottom: 40rpx;" @click="addRecord(item)">
							<view class="item_icon iconfont tn-flex tn-flex-row-center tn-flex-col-center" :class="'icon-' + item.dictKey"></view>
							<text class="item_title">{{ item.dictValue }}</text>
						</tn-grid-item>
					</block>
				</tn-grid>
				<tn-grid :col="4" v-if="topTabsIndex == 1">
					<block v-for="(item, index) in categoryInList" :key="index">
						<tn-grid-item style="margin-bottom: 40rpx;" @click="addRecord(item)">
							<view class="item_icon iconfont tn-flex tn-flex-row-center tn-flex-col-center" :class="'icon-' + item.dictKey"></view>
							<text class="item_title">{{ item.dictValue }}</text>
						</tn-grid-item>
					</block>
				</tn-grid>
			</view>
		</view>
		<tn-popup v-model="showKeyboard" mode="bottom"><yiyi-calculator @closeCalculatorPopup="saveNote" /></tn-popup>
	</view>
</template>

<script>
	import { getDictList } from '@/api/sys/dict';
	import { saveAccountRecord } from '@/api/account/record';
	import { account_out_type_key, account_in_type_key, accountRecordTypes } from '@/utils/enums';
	export default {
		name: 'AccountRecord',
		data() {
			return {
				topTabsIndex: 0,
				categoryOutList: [],
				categoryInList: [],
				accountRecordTypes,
				showKeyboard: false,
				selectItem: null
			}
		},
		created() {
			this.getCategoryList(account_out_type_key);
			this.getCategoryList(account_in_type_key);
		},
		computed: {
			tabsHeight() {
				return (this.vuex_custom_bar_height - this.vuex_status_bar_height) + 'px';
			}
		},
		methods: {
			/**
			 * 关闭当前窗口
			 */
			close() {
				uni.$common.navigateBack();
			},
			/**获取分类的接口
			 * @param {Object} code
			 */
			getCategoryList(code) {
				getDictList({
					queryParams: {
						F_code_eq: code,
						F_parentId_neq: 0
					}
				}).then(res => {
					if (code == account_out_type_key) {
						this.categoryOutList = res.result;
					}
					if (code == account_in_type_key) {
						this.categoryInList = res.result;
					}
				})
			},
			/**
			 * @param {Object} item
			 * 记录信息
			 */
			addRecord(item) {
				this.showKeyboard = true;
				this.selectItem = item;
			},
			saveNote(data) {
				if (Number(data.val) == 0) {
					return;
				}
				let saveEntity = {
					accountType: this.topTabsIndex,
					categoryType: this.selectItem.id,
					money: data.val,
					remark: data.remark,
					accountTime: data.time
				}
				saveAccountRecord(saveEntity).then(res => {
					this.$common.navigateTo('/pages/index');
				}).finally(res => {
					this.showKeyboard = false;
				});
			},
			/**顶部切换
			 * @param {Object} index
			 */
			topTabsChange(index) {
				this.topTabsIndex = index;
			},
		}

	}
</script>

<style lang="scss" scoped>
	.account_record_content {
		.top-right {
			font-size: 40rpx;
			margin-right: 20rpx;
			font-weight: bold;
		}

		.item_content {
			margin-top: 20rpx;

			.item_icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				background: #e4e4e4;
				border-radius: 50%;
			}

			.item_title {
				margin-top: 10rpx;
				font-size: 30rpx;
			}
		}

		.add_note_content {
			padding: 20rpx 30rpx;
			background-color: #e0e4e6;

			.add_note_money {
				text-align: right;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>